﻿@{
    Layout = "~/_SiteLayout.cshtml";
    Page.Title = "Home";
}
@section Scripts {  
<script type="text/javascript">
    var data = {
        text: 'Groceries',
        items: [{
            text: 'Drinks',
            items: [{
                text: 'Water',
                items: [{
                    text: 'Sparkling',
                    url: 'List',
                    leaf: true
                }, {
                    text: 'Still',
                    leaf: true
                }]
            }, {
                text: 'Coffee',
                leaf: true
            }, {
                text: 'Espresso',
                leaf: true
            }, {
                text: 'Redbull',
                leaf: true
            }, {
                text: 'Coke',
                leaf: true
            }, {
                text: 'Diet Coke',
                leaf: true
            }]
        }, {
            text: 'Fruit',
            items: [{
                text: 'Bananas',
                leaf: true
            }, {
                text: 'Lemon',
                leaf: true
            }]
        }, {
            text: 'Snacks',
            items: [{
                text: 'Nuts',
                leaf: true
            }, {
                text: 'Pretzels',
                leaf: true
            }, {
                text: 'Wasabi Peas',
                leaf: true
            }]
        }]
    };

    Ext.define('ListItem', {
        extend: 'Ext.data.Model',
        config: {
            fields: [{
                name: 'text',
                type: 'string'
            },
                    {
                        name: 'url',
                        type: 'string'
                    }

                ]
        }
    });

    var treeStore = Ext.create('Ext.data.TreeStore', {
        model: 'ListItem',
        defaultRootProperty: 'items',
        root: data
    });

    var detailContainer = Ext.create('Ext.Container', {
        fullscreen: true,
        scrollable: true,
        styleHtmlContent: true,
        flex: 1,
        items: [
             {
                 docked: 'top',
                 xtype: 'titlebar'
             }
        ]
    });
    Ext.application({
        name: 'NAVMobile',
        launch: function () {
            /*          
            Ext.Viewport.add({
            layout: 'hbox',
            items: [
            nestedList
            ,detailContainer
            ]
            });            
            */
            Ext.Viewport.add({
                layout: 'hbox',
                items: [
                   {
                       xtype: 'nestedlist',
                       title: 'Menu',
                       displayField: 'text',
                       store: treeStore,
                       detailContainer: detailContainer,
                       detailCard: true,
                       listeners: { //this, list, index, target, record, e, eOpts
                           leafitemtap: function (nestedList, list, index, target, record) {
                               var detailCard = nestedList.getDetailCard();
                               // detailCard.setHtml('<iframe src="'+record.get('url')+'">'  );
                               var url = record.get('url');
                               Ext.Ajax.request({
                                   url: url,
                                   method: 'GET',
                                   callback: function (options, success, response) {
                                       detailCard.setHtml(response.responseText);
                                   }
                               });
                           }
                       },
                       width: 200
                   },
                    detailContainer
                ]
            });
        }

    });

</script>
}